<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="./css/x-admin.css" media="all">
   </head>
   <body style="height: 100%; margin: 0">
   	
   	<div class="x-body">
   <xblock>
   <form class="layui-form x-center" action="${pageContext.request.contextPath}/echars3" method="post">
                <div class="layui-form-pane" style="margin-top: 15px;">
                  <div class="layui-form-item">
                
            	
            	
            	
                    <label class="layui-form-label" style="width: 84px;">日期范围查询</label>
                    <div class="layui-input-inline">
                      <input class="layui-input" placeholder="开始日" name="start" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline">
                      <input class="layui-input" placeholder="截止日" name="end" id="LAY_demorange_e">
                    </div>
                    
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                  </div>
                </div> 
            </form>
            </xblock>
            </div>
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=mSwpRhxGzXYqZC9smVXbtqQM8tBQcHGL"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var data = genData();

option = {
	
    title : {
        text: '库存/入库/出库',				//顶部大标题
        subtext: '价钱统计',				//顶部小标题
        x:'20%'						//顶部位置
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}￥ ({d}%)"				//显示格式   a为姓名  b为人名  c是实际数据  d是百分比
    },
    legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: data.legendData,				//传奇数据

        selected: data.selected			//人名数据
    },
    series : [
        {
            name: '库名称',			//悬浮标签名
            type: 'pie',
            radius : '35%',
            center: ['30%', '35%'],
            data: data.seriesData,				//系列数据
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};




function genData() {
    
    var legendData = [];
    var seriesData = [];
    var selected = {};
    
        
    legendData = ["storage","inlibrary","outlibrary"]
    seriesData = [{name:"库存总计",value:${tbUserEx.bigstorage}},{name:"入库总计",value:${tbUserEx.biginlibrary}},{name:"出库总计",value:${tbUserEx.bigoutlibrary}}]
    selected = {storage:true,inlibrary:true,outlibrary:true};
   
	
    console.log({
        legendData: legendData,
        seriesData: seriesData,
        selected: selected
    })
    
    return {
        legendData: legendData,
        seriesData: seriesData,
        selected: selected
    };

    
}
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script src="./js/x-layui.js" charset="utf-8"></script>
        <script>
        
        layui.use(['laydate','element','laypage','layer','form'], function(){
       	 $ = layui.jquery;//jquery
            laydate = layui.laydate;//日期插件
            lement = layui.element();//面包导航
            laypage = layui.laypage;//分页
            layer = layui.layer;//弹出层
            form = layui.form;
            
            var start = {
                    min: '1970-01-01 00:00:01'
                    ,max: '2099-06-16 23:59:59'
                    ,istoday: false
                    ,choose: function(datas){
                      end.min = datas; //开始日选好后，重置结束日的最小日期
                      end.start = datas //将结束日的初始值设定为开始日
                    }
                  };
                  
                  var end = {
                    min: '1970-01-01 00:00:01'
                    ,max: '2099-06-16 23:59:59'
                    ,istoday: false
                    ,choose: function(datas){
                      start.max = datas; //结束日选好后，重置开始日的最大日期
                    }
                  };
                  
                  document.getElementById('LAY_demorange_s').onclick = function(){
                    start.elem = this;
                    laydate(start);
                  }
                  document.getElementById('LAY_demorange_e').onclick = function(){
                    end.elem = this
                    laydate(end);
                  }
       	
       });
        </script>
</html>